.joblist-icon:after
{
    background-image: url("images/con.png");
    /* Make your icon fit */
    background-size: 18px 18px;
}

.versiontag
{
    text-align: right;
    font-size: x-small;
}

#faultdetail_table,
#stop_detail_table,
#activitydetail_table,
#machinedetail_table,
#sparepartinfo_detail_table,
#sparepartinfo_stocks_table,
#sparepartinfo_supplier_table {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
}

.sparepartinfo_stocks_table_light,
.sparepartinfo_stocks_table_dark 
{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

#faultdetail_table td.label,
#stop_detail_table td.label,
#activitydetail_table td.label,
#machinedetail_table.label,
#sparepartinfo_detail_table td.label,
.sparepartinfo_stocks_table_light td.label,
#sparepartinfo_supplier_table td.label
{
    font-size: 1em;
    width: 30%;
    border: 1px solid #003468;
    padding: 3px 7px 2px 7px;
    /*background-color: #8da6bf;*/
    background-color: #6b8c99;
    color: #ffffff;
}

#faultdetail_table td,
#stop_detail_table td,
#activitydetail_table td,
#machinedetail_table td,
#sparepartinfo_detail_table td,
.sparepartinfo_stocks_table_light td,
#sparepartinfo_supplier_table td
{
    font-size: 1em;
    width: auto;
    border: 1px solid #003468;
    padding: 3px 7px 2px 7px;
}

.sparepartinfo_supplier_post_even
{
    border: 1px solid #003468;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #FAFAD2;
}

.sparepartinfo_supplier_post_odd
{
    border: 1px solid #003468;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #e7f0f9;
}


.measuredparam_detail_table
{
    border:solid; 
    border-color:darkgrey; 
    border-width:1px; 
    border-collapse:collapse;
    width: 100%
}

.measuredparam_detail_table th,
.measuredparam_detail_table td
{
    width: 50%;
}

.measuredparam_detail_table_label
{
    font-size: 1em;
    width: 20%;
    border: 1px solid #003468;
    padding: 3px 7px 2px 7px;
    background-color: #6b8c99;
    color: #ffffff;
}

.measuredparam_detail_table_data
{
    font-size: 1em;
    text-align: right;
    width: 30%;
    border: 1px solid #003468;
    padding: 3px 7px 2px 7px;
}

.errorfault_reason_button {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    font-weight: 500!important;
    border: 1px solid #8da6bf /*{a-bup-border}*/!important;
    background-image: linear-gradient( #406ead /*{a-bup-background-start}*/, #29527a /*{a-bup-background-end}*/)!important;
    background-color: #29527a!important;
    color: #FFF!important;
    text-shadow: none!important;
    text-align: center;
}

.stockmanagement_notification
{
	border: 1px solid #000000;
    background-color: #FFF!important;
    color: #000!important;
    letter-spacing: 1pt;
    word-spacing: 1pt;
    font-size: 10px;
    text-align: left;
    line-height: 1;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding-left: 4px;
    padding-right: 4px;
    width: 80%;
}

.personallistheader
{
    border: 5px solid #F3D264!important;
}

.firstinfuture
{
    /*border-style: solid;
    border-top: 5px solid #F3D264!important;*/
    background-color: #F3D264!important;
}

#stockdetails_table
{
    border:solid; 
    border-color:darkgrey; 
    border-width:1px; 
    border-collapse:collapse;
    width: 100%;
    margin-bottom: 2px
}

#stockdetails_table td.label
{
    font-size: 1em;
    width: 100%;
    border: 1px solid #003468;
    padding: 3px 7px 2px 7px;
    background-color: #6b8c99;
    text-align:left;
    color: #ffffff;
}

#stockdetails_table td.infotext
{
    font-size: 1em;
    width: 100%;
    border: 1px solid #003468;
    padding: 3px 7px 2px 7px;
    background-color: #e59595;
    text-align:left;
    color: #ffffff;
}

#stockdetails_table td
{
    font-size: 1em;
    text-align: left;
    width: 100%;
    border: 1px solid #003468;
    padding: 3px 7px 2px 7px;
}


.job_info_table
{
    border:solid; 
    border-color:darkgrey; 
    border-width:1px; 
    border-collapse:collapse;
    width: 100%;
    margin-bottom: 2px
}

.job_info_table td.label
{
    font-size: 1em;
    width: 30%;
    border: 1px solid #003468;
    padding: 3px 7px 2px 7px;
    background-color: #6b8c99;
    text-align:left;
    color: #ffffff;
}

.job_info_table td
{
    font-size: 1em;
    text-align: left;
    width: 70%;
    border: 1px solid #003468;
    padding: 3px 7px 2px 7px;
}

.ui-grid-b >:nth-child(n) {
    width: 33%!important;
    margin-right: -.5px;
}

.extrapadding {
    padding-bottom: 20px;
}

.default_errormessage {
    padding-top: 10px;
    font-weight: bold;
    color: red;
}

/*#scantest_header {
    font-size: 1.4em;
    font-weight: bold;
    color: darkgreen;
}*/

.filter-combo
{
    padding-bottom: 0px!important;
    padding-top: 5px!important;
    font-size:14px !important;
}

.ui-datepicker { z-index: 10000 !important; }


.default_popup_class {
    /*max-width: 600px;*/
    background-image:linear-gradient( #fff /*{c-bup-background-start}*/, #dedede /*{c-bup-background-end}*/);

}

.default_popup_class a {
	margin-top:20px;
}

.pm5_popup_header {
    padding: 20px 20px 5px 5px;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    padding-bottom: 5px;
}


.list-header-class {
    border:1px solid #456f9a;
    padding:10px;
    /*color:#fff;*/
    /*background-image:linear-gradient(#6facd5,#497bae);*/
    /*text-shadow:0 1px 1px #3e6790;*/
    }

.list-element-class
{
    border-right-width:1px;
    border-left-width:1px;
    padding:10px!important;
    background-image:linear-gradient( #fff , #dedede);
}

.list-element-class a
{
    border:none!important;
    background-image:none!important;
    padding:10px!important;
    background:none!important;
}

.default_collapsible_element a {
    color:#003468!important;
    border:1px solid gray!important;
    background-image:linear-gradient( #fff , #dedede)!important; 
    /*padding-left:45px!important;
    padding-top:20px!important;
    padding-bottom:20px!important;*/
    
    
    /*font-weight:100!important;
    font-size:16px!important;*/
    
}

.edit-switch-button {
    padding: 0pc;
    text-align: left;
    margin: 0px;
    font-size: 0.8em;


}

.edit-switch-icon {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.jobnote-header {
    margin-bottom: 0px;
}

.jobnote-presentation-only {
    border-style: solid;
    border-width: thin;
    border-color: #1d324e;
    padding: 10px;
    background: #FFFFFF;
}

.end_date_selection {
    border-style: solid;
    border-width: thin;
    border-color: #1d324e;
    padding: 10px;
    background: #FFFFFF;
}

 .nostocksmarker{
    color:red;
 }


/************** START -  Quagga CSS - Added MABE 20190916 *******************/

#interactive.viewport {
  width: 640px;
  height: 480px;
}


#interactive.viewport canvas, video {
  float: left;
  width: 640px;
  height: 480px;
}

#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
  margin-left: -340px;
}

.scanner-overlay {
  display: none;
  width: 640px;
  height: 510px;
  position: absolute;
  padding: 20px;
  top: 50%;
  margin-top: -275px;
  left: 50%;
  margin-left: -340px;
  background-color: #FFF;
  -moz-box-shadow: #333333 0px 4px 10px;
  -webkit-box-shadow: #333333 0px 4px 10px;
  box-shadow: #333333 0px 4px 10px;
}

.scanner-overlay > .header {
  position: relative;
  margin-bottom: 14px;
}

.scanner-overlay > .header h4, .scanner-overlay > .header .close {
  line-height: 16px;
}

.scanner-overlay > .header h4 {
  margin: 0px;
  padding: 0px;
}

.scanner-overlay > .header .close {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 16px;
  width: 16px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

@media (max-width: 603px) {

  #container {
    width: 300px;
    margin: 10px auto;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  #container form.voucher-form input.voucher-code {
    width: 180px;
  }
}

@media (max-width: 603px) {

  .reader-config-group {
    width: 100%;
  }

  .reader-config-group label > span {
      width: 50%;
  }

  .reader-config-group label > select, .reader-config-group label > input {
      max-width: calc(50% - 2px);
  }

  #interactive.viewport {
    /*width: 400px;
    height: 200px;*/
    width: 100%;
    height: 320px;

    overflow: hidden;
  }

    video {
    width: 100%;
    height: 300px;

    }


  /*#interactive.viewport canvas, video {
    margin-top: -50px;
    width: 300px;
    height: 400px;
  }*/

 canvas{
    margin-top: -50px;
    /*width: 300px;
    height: 400px;*/

    width: calc(100% - 10);
    height: 300px;
  }

   /*#interactive.viewport{
        border-style: solid;
        border-color:green;
        border-width: thin;
    }


    canvas {
        border-style: solid;
        border-color:red;
        border-width: medium;
    }

    video{
        border-style: solid;
        border-color:yellow;
        border-width: thick;
    }*/

  #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
    margin-left: -300px;
  }

    /*canvas.drawingBuffer {
        border-style: solid;
        border-color:paleturquoise;
        border-width: thick;
        width: 300px;
        height: 290px;
    }*/


  #result_strip {
    margin-top: 5px;
    padding-top: 5px;
  }

  #result_strip ul.thumbnails > li {
    width: 150px;
  }

  #result_strip ul.thumbnails > li .thumbnail .imgWrapper {
    width: 130px;
    height: 130px;
    overflow: hidden;
  }

  #result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
    margin-top: -25px;
    width: 130px;
    height: 180px;
  }
}
@media (max-width: 603px) {

  .overlay.scanner {
    width: 640px;
    height: 510px;
    padding: 20px;
    margin-top: -275px;
    margin-left: -340px;
    background-color: #FFF;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;

  }

  .overlay.scanner > .header {
    margin-bottom: 14px;
  }

  .overlay.scanner > .header h4, .overlay.scanner > .header .close {
    line-height: 16px;
  }

  .overlay.scanner > .header .close {
    height: 16px;
    width: 16px;
  }
}

/************** START -  Quagga CSS - Added MABE 20190916 *****************/